<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>

</head>
<body>
<br>
<div class="form-group">
    <label for="str">输入要转换的内容：</label>
    <textarea class="form-control" id="str"></textarea>
    <!--<p class="help-block">这里是块级帮助文本的实例。</p>-->
</div>
<div class="form-group">
    <label class="radio-inline">
        <input type="radio" name="case" value="0" checked> 拼音小写
    </label>
    <label class="radio-inline">
        <input type="radio" name="case"  value="1"> 拼音大写
    </label>
</div>
<div class="form-group">
    <label class="radio-inline">
        <input type="radio" name="tone" value="0" checked> 忽略声调
    </label>
    <label class="radio-inline">
        <input type="radio" name="tone"  value="1"> 数字声调
    </label>
    <label class="radio-inline">
        <input type="radio" name="tone"  value="2"> 原始声调字符(需要字符支持)
    </label>
</div>
<div class="form-group">
    <label class="radio-inline">
        <input type="radio" name="v" value="0" checked> 用v代替ü
    </label>
    <label class="radio-inline">
        <input type="radio" name="v"  value="1"> u:代替ü
    </label>
    <label class="radio-inline">
        <input type="radio" name="v"  value="2"> 原始字符ü(需要字符支持)
    </label>
</div>
<div class="form-group">
    <p class="help-block">拼音之间的分隔符(默认为一个空格)：
        <input class="" type="text" id="sep" value=" "/>
        <!--<p class="help-block">这里是块级帮助文本的实例。</p>-->
</div>
<div class="form-group">
    <label class="radio-inline">
        <input type="radio" name="retain" value="true" checked> 保留非汉字字符
    </label>
    <label class="radio-inline">
        <input type="radio" name="retain"  value="false"> 不保留非汉字字符
    </label>
</div>
<br>
<div class="form-group">
    <button id="convert-btn" class="btn">转换为拼音</button>
</div>
<br>
<div class="form-group">
    <label for="txt">转换后的拼音：</label>
    <textarea class="form-control" id="txt"></textarea>
    <!--<p class="help-block">这里是块级帮助文本的实例。</p>-->
</div>
<script>
    $("#convert-btn").click(function(){
        $("#txt").val($("#str").val());
        $.post(
            "http://blog.jvm123.com/pinyin",
            {
                "s": $("#str").val(),
                "caseTypeNum": $("input[name='case']:checked").val(),
                "toneTypeNum": $("input[name='tone']:checked").val(),
                "vTypeNum": $("input[name='v']:checked").val(),
                "retain": $("input[name='retain']:checked").val(),
                "separate": $("#sep").val()
            },
            function(data){
                $("#txt").val(data.body);
            }
        );
    });
</script>
</body>
</html>
